<template>
	<div style="width: 100%">
		<div class="inputBoxStyle">
			<el-input
				placeholder="请输入手机号"
				maxlength="11"
				style="width: 72%"
				v-model="pageData![FieldItem?.attrs.phoneBind]"
				@input="getVerifCode('imgCode')"
			/>
			<span class="getVerifCode" @click="getVerifCode('code')" v-show="!FieldItem?.attrs.time">获取验证码</span>
			<span class="getVerifCode" v-show="FieldItem?.attrs.time">{{ FieldItem?.attrs.countDown }}秒</span>
		</div>
		<div class="inputBoxStyle">
			<el-input placeholder="请输入短信验证码" v-model="pageData![FieldItem?.attrs.testBind]" />
		</div>
		<div class="inputBoxStyle imgCodeBox">
			<el-input v-model="pageData![FieldItem?.attrs.imgCodeBind]" placeholder="请输入图形验证码" style="width: 70%"></el-input>
			<el-image class="imgCode" :src="pageData![FieldItem?.attrs.imgBind]"></el-image>
		</div>
	</div>
</template>

<script setup lang="ts">
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import { ElMessage } from 'element-plus';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem, pageData } = toRefs(props);

const emits = defineEmits(['handleClick']);

const getVerifCode = (ifImgCode: string) => {
	var regExp = /^[1][3-9][\d]{9}/;
	if (regExp.test(pageData?.value![FieldItem.value?.attrs.phoneBind])) {
		if (ifImgCode === 'code') {
			if (!pageData?.value![FieldItem.value?.attrs.imgCodeBind]) {
				return ElMessage.error('请先输入图形验证码');
			} else if (pageData?.value![FieldItem.value?.attrs.imgCodeBind] !== pageData?.value![FieldItem.value?.attrs.imgVeriBind]) {
				return ElMessage.error('图形验证码输入有误');
			}
		}
		const FieldItemTemp = JSON.parse(JSON.stringify(FieldItem.value));
		if (ifImgCode === 'imgCode') {
			FieldItemTemp.actions.list = [FieldItemTemp.actions.list[1]];
			return emits('handleClick', FieldItemTemp);
		}
		FieldItemTemp.actions.list = [FieldItemTemp.actions.list[0]];
		emits('handleClick', FieldItemTemp);
		FieldItem.value!.attrs.time = true;
		FieldItem.value!.attrs.countDown = 60;
		let inter = setInterval(() => {
			if (FieldItem.value?.attrs.countDown <= 1) {
				FieldItem.value!.attrs.time = false;
				clearInterval(inter);
			} else {
				FieldItem.value!.attrs.countDown--;
			}
		}, 1000);
	} else if (ifImgCode === 'code' || pageData?.value![FieldItem.value?.attrs.phoneBind].length === 11) {
		ElMessage.error('手机号格式不正确!');
	}
};
</script>

<style lang="scss" scoped>
.inputBoxStyle {
	background: #fff;
	border-bottom: 1px solid #c8c8c8;
	padding: 0 10px;
	white-space: nowrap;
}
.getVerifCode {
	float: right;
	width: 28%;
	text-align: right;
	cursor: pointer;
}
.inputBoxStyle::v-deep {
	.el-input__wrapper,
	.is-focus {
		box-shadow: none !important;
	}
}
.imgCodeBox {
	display: flex;
	align-items: end;
	justify-content: space-between;
	.imgCode {
		width: 28%;
		height: 55px;
		cursor: pointer;
	}
}
</style>
